<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '开票说明',
  },
}
</route>

<template>
  <view class="invoice">
    <div class="model">
      <div class="title">该订单由民宿开具发票</div>
      <div class="text">
        您的订单发票由民宿提供，您可在离店时要求民宿前台开具。如您已离店，请尽快联系民宿开具。
      </div>
      <div class="btn active" @click="call()">
        <span class="i-carbon-phone-filled mr-16rpx"></span>
        联系民宿
      </div>
    </div>
  </view>
</template>

<script lang="ts" setup>
let phone = null
onLoad((query) => {
  phone = query.phone
})

function call() {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone,
    })
  }
}
</script>

<style lang="scss" scoped>
.invoice {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 26rpx 30rpx;
  background-color: var(--bgc4);

  .model {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 30rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .title {
      width: 100%;
      font-size: 30rpx;
      font-weight: 700;
      line-height: 38rpx;
      color: var(--sc2);
    }
    .text {
      margin-top: 40rpx;
      font-size: 27rpx;
      line-height: 32rpx;
      color: var(--color4);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 373rpx;
      height: 92rpx;
      margin-top: 60rpx;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 92rpx;
      color: #fff;
      text-align: center;
      background: #1f2026;
      border-radius: 48rpx;
      box-shadow: 0px 17rpx 29rpx rgba(#1f2026, 0.3);
    }
  }
}
</style>
